<template>
  <d2-container>
    <el-row :gutter="20">
      <el-col :span="5">
        <el-scrollbar class="w-full h-full">
          <area-tree @nodeChange="treeNodeChange"></area-tree>
        </el-scrollbar>
      </el-col>
      <el-col :span="19">
        <div class="h-full flex flex-col">
          <div>
            <span class="theme-front-color">日期：</span>
            <el-date-picker
              v-model="dataForm.date"
              placeholder="时间"
              style="width: 200px;"
              class="filter-item"
              size="small"
              :picker-options="pickerOptions"
              type="year"
              suffix-icon="el-icon-date"
            ></el-date-picker>
            <el-button type="primary" style="margin-left:20px;" @click="getPowerDataList()">查询</el-button>
          </div>
        </div>
        <div id="assess_analysis_bar" style="height:400px;"></div>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-table :data="list" border class="w-full">
              <el-table-column prop="bName" label="名称"></el-table-column>
              <el-table-column prop="totalVal" label="碳排放量(t)"></el-table-column>
              <el-table-column prop="co2Target" label="目标值"></el-table-column>
              <el-table-column prop="co2TargetRate" label="达标率(%)">
                <template
                  slot-scope="scope"
                >{{scope.row.co2TargetRate =='--'?"--":(scope.row.co2TargetRate*100).toFixed(2)}}
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="12">
            <div class="theme-front-color">达标率排名（TOP1-10）</div>
            <!-- <div style="height:400px;" id="rate_chart"></div> -->
            <dv-capsule-chart :config="config" style="height:400px;" />
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </d2-container>
</template>

<script>
  import { mapGetters } from 'vuex'
  import areaTree from '../energyAnalysis/compont/area_tree'
  import * as echarts from 'echarts'
  import * as Util from "@/utils";
  import Config from "@/utils/config"
  export default {
    name: 'co2Assess',
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        list: [
          {
            name: '厂区3楼',
            c: 5229,
            target: 5229,
            rate: '100%'
          },
          {
            name: '厂区3楼',
            c: 5229,
            target: 5229,
            rate: '100%'
          },
          {
            name: '厂区3楼',
            c: 5229,
            target: 5229,
            rate: '100%'
          },
          {
            name: '厂区3楼',
            c: 5229,
            target: 5229,
            rate: '100%'
          },
          {
            name: '厂区3楼',
            c: 5229,
            target: 5229,
            rate: '100%'
          },
          {
            name: '厂区3楼',
            c: 5229,
            target: 5229,
            rate: '100%'
          },
          {
            name: '厂区3楼',
            c: 5229,
            target: 5229,
            rate: '100%'
          },
          {
            name: '厂区3楼',
            c: 5229,
            target: 5229,
            rate: '100%'
          },
          {
            name: '厂区3楼',
            c: 5229,
            target: 5229,
            rate: '100%'
          }
        ],
        config: {
          data: [
            // {
            //   name: "4F",
            //   value: 0.0786
            // },
            // {
            //   name: "泽天能源",
            //   value: 0.0786
            // },
            // {
            //   name: "22",
            //   value: 0
            // }
            // {
            //   name: 1,
            //   value: 99
            // },
            // {
            //   name: 2,
            //   value: 92
            // },
            // {
            //   name: 3,
            //   value: 88
            // },
            // {
            //   name: 4,
            //   value: 80
            // },
            // {
            //   name: 5,
            //   value: 75
            // },
            // {
            //   name: 6,
            //   value: 70
            // },
            // {
            //   name: 7,
            //   value: 65
            // },
            // {
            //   name: 8,
            //   value: 60
            // },
            // {
            //   name: 9,
            //   value: 55
            // },
            // {
            //   name: 10,
            //   value: 50
            // }
          ],
          colors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'],
          showValue: true,
        },
        buildList: [],
        dataForm: {
          date: new Date(),
          dateType: 'year',
          energyType:'',
          subEnergyType:'',//分项选择值
        },
        meterdataList:[]
      }
    },
    computed: {
      ...mapGetters('d2admin/theme', ['activeSetting'])
    },
    components:{
      areaTree
    },
    created() {
      this.$nextTick(() => {
         this.getPowerDataList()
       //  this.drawBar()
      })
    },
    methods: {
      treeNodeChange(data){
        this.buildList = data
        this.getPowerDataList()
      },
      formarDate(type, date) {
        return Util.dateFormat(Config.searchDate.find(item => item.date == type).format, date)
      },
      getPowerDataList() {
        this.meterdataList = []
        this.$api.okhttp({
          url:this.$http.adornUrl('/co2/cokpi/list'),
          method: "post",
          data: this.$http.adornParams(
            {
              buildingIds: this.buildList,
              date: (this.dataForm.date&&this.dataForm.date!="")? this.formarDate(this.dataForm.dateType,new Date(this.dataForm.date)):'',
              dateType: Config.searchDate.find(item=>item.date==this.dataForm.dateType).typeDesc,
              meterType: this.dataForm.energyType,
              customerId: this.$util.cookies.get("customer_id"),
              projectId:this.$util.cookies.get("cuuren_projectId")
            }
          )
        }).then((data) => {
          if (data && data.code === 0) {
            this.list = data.data.data;
            this.drawBar(this.list)
            this.config = {
              data: data.data.top,
              colors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'],
              showValue: true
            }
          }
          this.dataListLoading = false;
        })

      },
      objArraySort(objArr, key)
      {
        let result = objArr.slice(0);
        return result.sort((a, b) => parseInt(a[key]) - parseInt(b[key]));
      },
      drawBar(data) {
        const chart = echarts.init(document.querySelector('#assess_analysis_bar'))

        let seriesArry = []
        let xdata = []
        for(let i = 0;i<data.length;i++){
            let val = data[i].val;
            let valueArry = []
            Object.keys(val).forEach((key) => {
              valueArry.push({"id":key,"value":val[key]})
            })
            valueArry = this.objArraySort(valueArry, "id")
            xdata = valueArry.map(i=>i.id)
            let ydata = valueArry.map(i=>i.value)

            seriesArry.push({
              data: ydata,
              type: 'bar',
              name: data[i].bName,
              stack: 'use'
            })
        }

        chart.setOption({
          grid: {
            left: '5%',
            right: '5%',
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              formatter: (value, index) => value
            },
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            axisLine: {
              lineStyle: {
                color: this.activeSetting.name === 'd2' ? '#333' : '#999'
              },
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            right: 20,
            textStyle: {
              color: this.activeSetting.name === 'd2' ? '#333' : '#ccc'
            },
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: this.activeSetting.name === 'd2' ? '#333' : '#999'
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#999']
              },
            },
          },
          series:seriesArry
           // [
            // {
            //   data: [
            //     23, 33, 20, 34,
            //     44, 66, 12, 88,
            //     197, 23, 91, 42
            //   ],
            //   type: 'bar'
            // },
            // {
            //   data: [
            //     197, 23, 91, 42,
            //     23, 33, 20, 34,
            //     44, 66, 12, 88
            //   ],
            //   type: 'line',
            //   smooth: true,
            //   itemStyle: {
            //     normal: {
            //       lineStyle: {
            //         type: 'dotted'
            //       },
            //     },
            //   },
            // }
         // ]
        })
      },
    },
  }
</script>

<style>
</style>
